<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="com.online_video.entity.User" %><%--
  Created by IntelliJ IDEA.
  User: 64108
  Date: 14/3/2022
  Time: 下午5:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    User user = (User) session.getAttribute("user");
    System.out.println(user);
    String vid = request.getParameter("vid");
    String likeNum = "100";
    Date date = new Date();
    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
    String dataStr = simpleDateFormat.format(date);
%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../css/video.css">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../js/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css"/>
    <script type="text/javascript" src="../js/sweetalert.min.js"></script>
    <link rel="stylesheet" href="../css/index.css"/>
</head>
<body>
<!--导航条-->
<%@include file="plugins/navbar.jsp" %>
<div class="container theme-showcase" role="main" style="margin-top: 60px">
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title">
                        <h2 id="video-title">视频标题</h2>
                        <small>
                            <span>播放量&nbsp;-</span>
                            <span>弹幕数&nbsp;</span>
                            <span>上传时间&nbsp;</span>
                            <%--视频上传人员的id--%>
                            <span style="display: none"></span>
                        </small>
                    </h1>
                </div>
                <div class="panel-body">
                    <!-- 16:9 aspect ratio -->
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src=""></iframe>
                    </div>
                    <h6>多少人在看</h6>
                </div>

                <!--          点赞收藏行      -->
                <div class="row">
                    <div class="col-md-3 pull-left">
                        <img src="fonts/img/like.png" class="icon" id="like"/>
                        <%-- 从数据库中获取点赞数据--%>
                        <label for="like" id="like-lable"></label>
                    </div>
                    <div class="col-md-3 pull-left">
                        <img src="fonts/img/collect_unchecked.png" class="icon" id="collect" data-toggle="modal"
                             data-target="#collectModal"
                             style="width: 38px;height: 38px"/>
                        <label for="collect" id="collect-lable"></label>
                    </div>
                </div>
                <div class="panel-heading">
                    <h1 class="panel-title">
                        <h2>评论</h2>
                    </h1>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-2">
                            <img id="upHead1" src="/online_video/img/1.jpeg" alt="up头像" class="img-circle center-block"
                                 style="height: 50px;width:50px;"/>
                            <span id="upName1">
                            微熠
                            </span>
                        </div>
                        <div class="col-md-8">
                            <textarea class="form-control" placeholder="发表你的评论.."></textarea>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-md btn-info" id="comment" type="button"
                                    style="height: 50px;width: 100%">发表评论
                            </button>
                        </div>
                    </div>

                    <div class=" comment-list panel-body" id="comment-Area">
                        <%--                        <div class="media">--%>
                        <%--                            <div class="media-left">--%>
                        <%--                                <a href="#">--%>
                        <%--                                    <img class="img-circle" src="/online_video/img/1.jpeg" alt="头像"--%>
                        <%--                                         style="width: 50px;height: 50px;">--%>
                        <%--                                </a>--%>

                        <%--                            </div>--%>
                        <%--                            <div class="media-body">--%>
                        <%--                                <h5 class="media-heading">用户名--%>
                        <%--                                    <small class="pull-right"><%=dataStr%>--%>
                        <%--                                    </small>--%>
                        <%--                                </h5>--%>
                        <%--                                评论内容--%>
                        <%--                            </div>--%>
                        <%--                        </div>--%>
                    </div>


                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h3>
                <img id="upHead2" src="/online_video/img/1.jpeg" alt="up头像" class="img-circle"
                     style="height: 50px;width:50px;"/>
                <span id="upName2">
                   微熠
                </span>
            </h3>
            <button type="button" class="btn btn-md btn-info">
                + &nbsp; 关注
            </button>
            <div class=" panel panel-body recommend-list">



            </div>
        </div>
    </div>
</div>

<!--点击弹出收藏夹-->
<div class="modal fade" tabindex="-1" role="dialog" id="collectModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">选择收藏夹</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="" id="collDiv">
                        <p href="#" class="list-group-item active">
                            我的收藏夹
                        </p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript" src="../js/jquery-1.9.min.js">
</script>
<script type="text/javascript" src="../js/bootstrap-3.4.1-dist/js/bootstrap.min.js">
</script>
<script type="text/javascript">

    //回填到iframe中当前视频的播放
    $.ajax({
        //指定当前请求为异步请求
        async: true,
        //指定请求路径
        url: './video.do?',
        //指定请求方式
        type: 'POST',
        dataType: 'text',
        data: {
            action: "queryByVid",
            vid:<%=vid%>
        }, success: function (data) {
            if (data != null) {
                var jsonStr = JSON.parse(data);
                console.log(jsonStr.u_id);
                //回填视频信息
                $('.panel-body iframe').attr("src", "/online_video/img/" + jsonStr.videoPath);
                //视频标题
                $('#video-title').text(jsonStr.viName);
                //视频播放量
                $('#video-title').next().children(' span:eq(0)').text("播放量" + jsonStr.playAmount);
                //视频点赞信息
                $('#video-title').next().children(' span:eq(1)').text("弹幕数:111");
                //视频上传日期
                $('#video-title').next().children(' span:eq(2)').text("上传时间:" + jsonStr.date);
                //视频上传者
                // $('#video-title').next().children(' span:eq(3)').text(jsonStr.u_id);
                //视频点赞信息
                $('#like-lable').text(jsonStr.like)
                //视频收藏信息
                $('#collect-lable').text(jsonStr.collect)
                //关注下方的视频推荐 推荐该用户上传的所有视频信息
                queryVideoByU_id(jsonStr);
            }
            // $('#collect-lable').text(jsonStr.collect)
        }, error: function (err) {
            //转出404视频丢失页面
        }

    })

    //将视频的信息id传回后台
    $.ajax({
        async: true,
        dataType: "text",
        method: "POST",
        url: "./history.do?",
        data: {
            action: "insert",
            vid:<%=vid%>
        }, success: function (data) {
            if (data != null && data != "") {
                var parse = JSON.parse(data);

                console.log(parse + "返回历史记录");

            }
        }

    })

    //回填评论内容
    $.ajax({
        async: true,
        type: "POST",
        url: './video.do?',
        dataType: "text",
        data: {
            action: "queryComment",
            vid:<%=vid%>,
        }, success: function (data) {
            if (data != null) {
                var comments = JSON.parse(data);
                if (comments.length != 0) {
                    for (var i = 0; i < comments.length; i++) {
                        var comment = comments[i];
                        $('#comment-Area').append(
                            `<div class="media">` +
                            `        <div class="media-left">` +
                            `             <a href="#">` +
                            `                 <img class="img-circle" src="/online_video/img/` + comment.headportrait + `" alt="头像" style="width: 50px;height: 50px;">` +
                            `               </a>` +
                            `           </div>` +
                            `         <div class="media-body">` +
                            `             <h5 class="media-heading">` + comment.nickname +
                            `           <small class="pull-right">` + comment.date + `</small>` +
                            `              </h5>` +
                            `               ` + comment.comment + `` +
                            `   </div>` +
                            `</div>`)
                    }
                } else {
                    $('#comment-Area').empty()
                    $('#comment-Area').append(`<div class="commentDiv"><h3  class="center-block" >` + "暂无评论" + `</h3></div>`)
                }
            }
        }
    })


    //回填当前视频的收藏量
    $.ajax({
        async: true,
        url: "./video.do?action=countCollect",
        data: {'v_id':<%=vid%>},
        dataType: 'text',
        success: function (data) {
            $('#collect-lable').text(data)
        }
    })

    $(function () {
        //点赞悬停样式的改变
        $('#like').hover(
            function () {
                $(this).attr("src", "fonts/img/like.png")
            },
            function () {
                $(this).attr("src", "fonts/img/like1.png")
            })

        //收藏悬停样式的改变

        // $('#collect').hover(
        //     function () {
        //         $(this).attr("src", "fonts/img/collect_checked.png")
        //     },
        //     function () {
        //         $(this).attr("src", "fonts/img/collect_unchecked.png")
        //     })


        //点赞信息
        $('#collect').click(function () {
            $.ajax(
            )
        })
        //在文本框输入评论内容插入数据库进行再一次的调用该数据
        $('#comment').click(function () {
            var text = $(' textarea ').val();
            if (text === "") {
                swal("会说你就多说点！");
            } else {
                $.ajax({
                    async: true,
                    type: "POST",
                    url: './video.do?',
                    dataType: "text",
                    data: {
                        action: "insertComment",
                        vid:<%=vid%>,
                        u_id:<%=user.getId()%>,
                        comment: text,
                        date:<%=dataStr%>,
                    }, success: function (data) {
                        if (data != null) {
                            var state = JSON.parse(data);
                            if (state === "1") {
                                swal("评论成功！").then(function (isContinue) {
                                    if (isContinue) {
                                        queryComment();
                                    }
                                })
                            } else if (state === "0") {
                                swal("评论失败！重试")
                            }
                        }
                    },
                    error: function (err) {
                        console.log("评论信息拉取失败！" + err)
                    }
                })

            }

        })

    })
</script>
<script>
    function queryVideoByU_id(jsonStr) {
        $.ajax({
            async: true,
            dataType: "text",
            method: "post",
            url: "./video.do?",
            data: {
                action: "queryByU_id",
                u_id: jsonStr.u_id,
            }, success: function (data) {
                if (data != null) {
                    var videos = JSON.parse(data);
                    if (videos === "") {
                        $('.recommend-list').append(`<h3>+"暂无视频"+</h3>`)
                    } else {
                        /* console.log(videos);*/
                        for (var i = 0; i < videos.length; i++) {
                            $('.recommend-list').append(
                                `<div class="media">` +
                                `      <div class="media-left">` +
                                `            <a href="./v.jsp?vid=` + videos[i].vid + `">` +
                                `              <img class="img" src="/online_video/img/` + videos[i].img + `" alt="头像" style="width: 80px;height: 80px;"> ` +
                                `           </a>` +
                                `      </div>` +
                                `     <div class="media-body">` +
                                `         <h5 class="media-heading">` + videos[i].viName +
                                `        </h5> ` + videos[i].playAmount +
                                `     </div>` +
                                `</div>`)
                        }
                    }


                }
            }

        })
    }

</script>

<script>
    function queryComment() {
        $.ajax({
            async: true,
            type: "POST",
            url: './video.do?',
            dataType: "text",
            data: {
                action: "queryComment",
                vid:<%=vid%>,
            }, success: function (data) {
                if (data != null) {
                    var comments = JSON.parse(data);
                    if (comments.length != 0) {
                        //清空输入文本框内容
                        $(' textarea ').val("")
                        //清空评论区域内容
                        $('#comment-Area').empty()
                        //再次拉取数据库内容
                        for (var i = 0; i < comments.length; i++) {
                            var comment = comments[i];
                            $('#comment-Area').append(
                                `<div class="media">` +
                                `        <div class="media-left">` +
                                `             <a href="#">` +
                                `                 <img class="img-circle" src="/online_video/img/` + comment.headportrait + `" alt="头像" style="width: 50px;height: 50px;">` +
                                `               </a>` +
                                `           </div>` +
                                `         <div class="media-body">` +
                                `             <h5 class="media-heading">` + comment.nickname +
                                `           <small class="pull-right">` + comment.date + `</small>` +
                                `              </h5>` +
                                `               ` + comment.comment + `` +
                                `   </div>` +
                                `</div>`)
                        }
                    }
                } else {
                    $('#comment-Area').empty()
                    $('#comment-Area').append(`<div class="commentDiv"><h3  class="center-block" >` + "暂无评论" + `</h3></div>`)
                }
            }
        })

    }
</script>

<script type="text/javascript">
    $(function () {
        $('#myModal').on('shown.bs.modal', function () {
            $('#myInput').focus()
        })

    })
</script>
<%--收藏夹--%>
<script type="text/javascript">
    $(function () {
        $('#collect').click(function () {
            $('#collDiv').empty();
            $.ajax({
                async: true,
                url: "./video.do?action=queryCollectBookById",
                dataType: 'text',
                success: function (data) {
                    if (data != "") {
                        var jsonObj = JSON.parse(data);
                        for (var i = 0; i < jsonObj.length; i++) {
                            $('#collDiv').append('        <a id="collbook' + jsonObj[i].c_book_id + '" onclick="confirmC_book_id(' + jsonObj[i].c_book_id + ')" name="' + jsonObj[i].c_book_id + '" href="#" class="list-group-item">' + jsonObj[i].c_book_name + '</a>\n')
                        }
                    }
                }
            })
        })
    })

    var collbook_id;
    $(document).click(function (e) {
        collbook_id = $(e.target).attr("name");
    })
</script>

<script type="text/javascript">
    $(function () {
        $.ajax({
            async: true,
            url: './video.do?action=isExitCollectVideo',
            data: {"v_id":<%=vid%>},
            dataType: 'text',
            success: function (data) {
                if (data == 1) {//已收藏
                    $('#collect').attr("src", "fonts/img/collect_checked.png")
                    $('#collect').attr('data-target', "")
                    $('#collect').attr('onclick', "cancelCollect(<%=vid%>)")
                }
            }
        })
    })

    function cancelCollect(vid) {
        swal({
            title: "取消收藏?",
            text: "该视频以收藏，是否取消收藏？",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
            .then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        async: true,
                        url: "./video.do?action=cancelCollectVideo",
                        data: {"v_id": vid},
                        dataType: 'text',
                        success: function (data) {
                            if (data > 0) {
                                $('#collect').attr("src", "fonts/img/collect_unchecked.png")
                                swal({
                                    title: '取消收藏成功',
                                    icon: 'success',
                                    text: '取消收藏成功',
                                    confirmButtonText: "确定",
                                }).then(function () {
                                    window.location.reload()
                                })
                            }
                        }
                    })

                }
            });
    }

</script>

<script type="text/javascript">
    function confirmC_book_id(c_book_id) {
        $('#saveBtn').click(function () {
            <%--console.log('<%=vid%>')--%>
            $.ajax({
                sync: true,
                url: "./video.do?action=insertCollect",
                data: {"v_id": '<%=vid%>', "c_book_id": c_book_id},
                dataType: 'text',
                success: function (data) {
                    if (data != "") {
                        var jsonStr = JSON.parse(data);
                        if (jsonStr == "1") {
                            $('#collect').attr("src", "fonts/img/collect_checked.png")
                            swal({
                                title: '收藏成功',
                                icon: 'success',
                                text: '收藏成功',
                                confirmButtonText: "确定",
                            }).then(function () {
                                window.location.reload()
                            })
                        } else {
                            swal({
                                title: '收藏失败',
                                icon: 'success',
                                text: '收藏失败',
                                confirmButtonText: "确定",
                            })
                        }
                    }
                }
            })
        })
    }

</script>
<script type="text/javascript">
    $.ajax({
        async: true,
        url: "./video.do?action=queryUserByVid",
        data: {"vid":<%=vid%>},
        dataType: 'text',
        success: function (data) {
            if (data != null) {
                var jsonObj = JSON.parse(data);
                $('#upHead1').attr("src", '/online_video/img/' + jsonObj.headportrait + '');
                $('#upHead2').attr("src", '/online_video/img/' + jsonObj.headportrait + '');
                $('#upName1').text('up主： '+jsonObj.nickname)
                $('#upName2').text(jsonObj.nickname)
            }
        }
    })
</script>
</body>
</html>
